<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css_postion定位</title>
	<link rel="stylesheet" href="style.css">
	<style>
		/**
			定位.就是找当前元素及其父元素的定位基点.
		*/
		/**默认定位与相对定位的区别
			都是找其父元素的定位基点.
			这两个定位都没有脱离文档文档流.
			绝对定位会脱离文档流.
		相对定位与绝对定位的区别:
			两种定位都基于其父元素找定位基点.其父元素没有定位基点向上一层去找.直到body原点为止.
			相对定位是不脱离文档流.
			绝对定位脱离文档流.
		*/
		div{width: 200px; height: 400px;}
		#div1{
			background-color: red;
			/**postion为static默认left属性不起作用. z-index也不起作用. */
			left:200px;
			margin:100px 0 0 100px ;

		}
		#div2{
			position: absolute;
            background-color: lightblue;
			left:200px;
			margin:-100px 0 0 0 ;
            z-index: -1;
		}

		#div3{
            background-color: lightskyblue;
		}

		#div4{
			/**固定定位.*/
			position: fixed;
			background-color: darkblue;

		}

	</style>
</head>
<body>
	<!--(div#div1)+div>#div2-->

	<div id="div4"> </div>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</body>
</html>